<template>
	<el-container>
		<el-aside width="20%">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model.trim="treeFilterText" clearable />
				</el-header>
				<el-main class="nopadding">
					<el-tree
						ref="treeRef"
						class="menu"
						node-key="id"
						:data="treeData"
						:current-node-key="''"
						:highlight-current="true"
						:expand-on-click-node="false"
						:filter-node-method="treeFilterNode"
						accordion
						@node-click="treeClick">
					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel"></div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-select v-model="reqParams.productCode" class="m-2" clearable placeholder="请选择产品">
							<el-option
								v-for="item in productCodeOptions"
								:key="item.itemCode"
								:label="item.itemName"
								:value="item.itemCode" />
						</el-select>
						<RangeDate @change="rangeDateChange" />
						<el-button icon="el-icon-search" type="primary" :disabled="!reqParams.opCode" @click="search" />
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable
					ref="tableRef"
					:tableName="tableName"
					:api-obj="this.$API.tracearchive.dynamicPage"
					:params="reqParams"
					:initData="false"
					dynamicPage
					row-key="id"
					stripe
					hideContextMenu>
					<template #PassResult="{ data }">
						<el-tag type="success" v-if="data.PassResult === 'OK'">{{ data.PassResult }}</el-tag>
						<el-tag type="danger" v-else-if="data.PassResult === 'NG'">{{ data.PassResult }}</el-tag>
						<el-tag type="" v-else>{{ data.PassResult }}</el-tag>
					</template>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import RangeDate from "../../components/RangeDate";

export default {
    components: {
        RangeDate,
    },
    data() {
        return {
            treeFilterText: '',
            treeData: [],
            productCodeOptions: [],
            tableName: '数据追溯',
            reqParams: {
                lineCode: '',
                opCode: '',
                productCode: '',
                startTime: '',
                endTime: '',
            },
            column: [],
        };
    },
    mounted() {
        this.initTree();
        this.initOptions();
    },
    watch: {
        treeFilterText: {
            handler(newVal) {
                this.$refs.treeRef.filter(newVal);
            },
        },
    },
    methods: {
        //树过滤
        treeFilterNode(value, data) {
            if (!value) return true;
            return data.label.includes(value);
        },
        async initTree() {
            const resp = await this.$API.mdline.tree.get();
            if (resp.code != 200) {
                this.$message.error(resp.message);
                return;
            }
            this.treeData = resp.data;
        },
        async initOptions() {
            const resp = await this.$API.mditem.allProduct.get();
            if (resp.code != 200) {
                this.$message.error(resp.message);
                return;
            }
            this.productCodeOptions = resp.data;
        },
        async treeClick(node) {
            // 非叶子节点，清空数据
            if (!node.isLeaf) {
                this.reqParams.lineCode = '';
                this.reqParams.opCode = '';
                return;
            }

            this.reqParams.lineCode = node.parentValue;
            this.reqParams.opCode = node.value;
            this.tableName = this.reqParams.opCode;

            this.$refs.tableRef.tableData = []; // 清空数据
        },
        rangeDateChange(rangeDate) {
            if (rangeDate !== null) {
                this.reqParams.startTime = rangeDate[0];
                this.reqParams.endTime = rangeDate[1];
            }
        },
        async search() {
            this.$refs.tableRef.refresh();
        },
    }
}
</script>

<style scoped></style>
